<html>
   <head>
      <title>Retrieve EOD data from Google Finance</title>
      <g:javascript library="prototype"/>
   </head>
   <body>
      <table>
         <g:each var="instrument" in="${instruments}">
         <tr>
            <td>${instrument.symbol}</td>
            <td>${instrument.name}</td>
            <td><g:form action='retrieve'>
            <g:hiddenField name='symbol' value='${instrument.symbol}'/>
            <g:submitToRemote value="Get data"
            url="[controller: 'fieldValue', action: 'retrieve']"
            onLoading="showSpinner(true)" 
            onComplete="showSpinner(false)"/>
            <img id="spinner" style="display: none" src="<g:createLinkTo dir='/images' file='spinner.gif'/>"/>
            </g:form></td>
         </tr>
         </g:each>
      </table>
      <g:javascript>
            function showSpinner(visible) {
                $('spinner').style.display = visible ? "inline" : "none"
            }   
        </g:javascript>

   </body>
</html>
